<template>
  <div class="industry-dynamic-wrap">
    <div class="industry-dynamic-banner">
    </div>
    <div class="industry-dynamic-list">
      <div class="list-item" v-for="(item, index) in industryDynamicsList" :key="index" @click="goDynamicDetail(item.id)">
        <div class="list-info">
          <p class="list-title">{{item.title}}</p>
          <p class="list-time">{{item.updataTime}}</p>
        </div>
        <div class="list-pic">
          <img :src="item.imgUrl">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import talents from '@/api/talents'
export default {
  layout: 'teach',
  data () {
    return {
      industryDynamicsList: talents.industryDynamicsLists
    }
  },
  methods: {
    // 跳转到动态详情
    goDynamicDetail (id) {
      this.$router.push({
        path: `/talents/news-detail/${id}`
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.industry-dynamic-wrap {
  padding-bottom: 60px;
  background-color: #F6F6F6
  .industry-dynamic-banner {
    background: url('/img/talents/industry-dynamic-banner.png') no-repeat center;
    height: 303px;
    background-color: #4575fe;
  }
  .industry-dynamic-list {
    margin: 30px auto 0;
    width: 1000px
    .list-item {
      display:flex;
      justify-content: space-between;
      height: 154px;
      border-bottom: 1px solid #EEEEEE;
      cursor: pointer
      .list-pic {
        width: 180px;
        height: 130px;
        margin-right: 12px;
        margin-top: 12px;
        overflow hidden;
        img{
          width: 100%;
          height: 100%;
          transition: transform .25s;
          cursor: pointer;
        }
        &:hover img{
          transform: scale(1.2)
        }
      }
      .list-info {
        p {
          font-size: 22px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #101010;
          margin-top: 24px;
          line-height: 22px;
          &:last-child {
            font-size: 16px;
            color: #A1A1A1;
            margin-top: 68px;
            line-height: 16px;
          }
        }
        .list-title {
          &:hover {
            color: #4675FD
          }
        }
      }
    }
  }
}
</style>